<template>
  <div class="reading-meter">
    <el-tabs
      type="border-card"
      @tab-click="tabClick"
      v-model="activeName"
      class="reading-meter-w"
    >
      <el-tab-pane label="电能量" name="1">
        <Eletable
          v-if="activeName === '1'"
          ref="etableheader"
          :etableData="etableData"
          class="reading-meter-w-table"
          :height="height"
          @selectData="selectData"
          :percentage1="percentage1"
          :percentageFlag1="percentageFlag1"
        ></Eletable>
      </el-tab-pane>
      <el-tab-pane label="最大需量及发送时间" name="2">
        <Maxtable
          v-if="activeName === '2'"
          ref="mtableheader"
          :maxtableData="maxtableData"
          :height="height"
          @selectData="selectData"
          :percentage2="percentage2"
          :percentageFlag2="percentageFlag2"
        ></Maxtable>
      </el-tab-pane>
      <el-tab-pane label="变量" name="3">
        <Vatable
          v-if="activeName === '3'"
          ref="vtableheader"
          :height="height"
          :vatableData="vatableData"
          @selectData="selectData"
          :percentage3="percentage3"
          :percentageFlag3="percentageFlag3"
        ></Vatable>
      </el-tab-pane>
      <el-tab-pane label="参变量" name="4">
        <Paramtable
          v-if="activeName === '4'"
          ref="ptableheader"
          :paramtableData="paramtableData"
          :height="height"
          @selectData="selectData"
          :percentage4="percentage4"
          :percentageFlag4="percentageFlag4"
        ></Paramtable>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Eletable from "@/components/table/eletable.vue";
import Maxtable from "@/components/table/maxtable.vue";
import Vatable from "@/components/table/vatable1.vue";
import Paramtable from "@/components/table/paramtable1.vue";
import { useWinSize } from "@/utils/comm.js";
const emit = defineEmits(["selectData"]);

defineProps({
  percentageFlag1: {
    type: Boolean,
    default: false,
  },
  percentageFlag2: {
    type: Boolean,
    default: false,
  },
  percentageFlag3: {
    type: Boolean,
    default: false,
  },
  percentageFlag4: {
    type: Boolean,
    default: false,
  },
  percentage1: {
    type: Number,
    default: 0,
  },
  percentage2: {
    type: Number,
    default: 0,
  },
  percentage3: {
    type: Number,
    default: 0,
  },
  percentage4: {
    type: Number,
    default: 0,
  },
  etableData: {
    type: Array,
    default: [],
  },
  maxtableData: {
    type: Array,
    default: [],
  },
  vatableData: {
    type: Array,
    default: [],
  },
  paramtableData: {
    type: Array,
    default: [],
  },
});
const activeName = ref("1");
const etableheader = ref();
const height = ref(350);

const options = [
  {
    value: "30",
    label: "30",
  },
  {
    value: "45",
    label: "45",
  },
  {
    value: "60",
    label: "60",
  },
  {
    value: "90",
    label: "90",
  },
];
const multipleSelectionVal = ref();
const cellDataVal = ref();
const positionVal = ref();
//界面初始化
onMounted(() => {
  //判断屏幕尺寸
  const size = useWinSize();
  if (size.width > 1440) {
    height.value = 450;
  } else {
    height.value = 350;
  }
});
const selectData = (multipleSelection, cellData, position) => {
  multipleSelectionVal.value = multipleSelection;
  cellDataVal.value = cellData;
  positionVal.value = position;
  emit("selectData", multipleSelection, cellData, position, activeName.value);
};
const tabClick = (obj) => {
  positionVal.value = "";
  cellDataVal.value = "";
  multipleSelectionVal.val = [];
  emit(
    "selectData",
    multipleSelectionVal.val,
    cellDataVal.value,
    positionVal.value,
    obj.props.name
  );
};
</script>

<style lang="scss" scoped>
.timer {
  width: 500px;
  margin: 0 auto;
  .timer-item {
    text-align: center;
    margin-top: 4.5rem;
  }
  .el-button {
    height: 50px;
    width: 100px;
  }
}
</style>
